<template>
    <UserLoginComponent>
        <div class="mx-3 my -2">
            <van-space direction="vertical" fill size="5.5%">
                <van-field v-model="passwordStore.usernameInputProps" name="username" placeholder="请输入用户名" type="text"
                    :rules="[{ required: true, message: '请输入用户名' }]" clearable maxlength="15" />
                <van-field v-model="passwordStore.passwordInputProps" name="password" placeholder="请输入用户密码" type='text'
                    :rules="[{ required: true, message: '请输入用户密码' }]" clearable maxlength="15" />
            </van-space>
            <div class="w-full mt-4">
                <van-button type="primary" @click="passwordStore.userLogin" block round text="用户登录"/>
            </div>
        </div>
    </UserLoginComponent>
</template>

<script setup lang="ts">
const passwordStore = usePasswordStore()

onBeforeMount(async () => {
    await passwordStore.initStore();
})
</script>

<style scoped></style>